<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
	trimDirectiveWhitespaces="true"%>
<!-- 태그 라이브러리 통해 JDBC접속 -->
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!-- sql문 등록 -->
<!-- list.jsp?cpage=1 -->
<!-- list.jsp?cpage=2 -->
<!-- list.jsp?cpage=3 -->
<!-- 현재 페이지 처리 -->
<c:set var = "cpage" value="1"/>
<c:if test="${not empty param.cpage }">
	<c:set var = "cpage" value = "${param.cpage}"/>
</c:if>
<%--페이지 단위로 게시판 리스트 가져오기 
	오라클의 rank 분석 함수를 이용함(쉬움)
	오라클의 rownum을 이용하면 성능이 좋아짐(어려움)--%>
<sql:query var="rs" dataSource="jdbc/oracle11xe">
		select  b.* from(	
					select /*+frist_row(15)*/ceil(rownum/15) page, a.* 
					from ( select * from board order by bdno desc ) a ) b
		where page = ?
<sql:param value = "${cpage}"/>
</sql:query>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:: JSP 프로젝트 v1 ::</title>
<link href="css/normalize" rel="stylesheet">
<style type="text/css">

/*1. 레이아웃 지정(구역 header, contents, footer 세 영역으로 나눈 후 각각 영역의 사이즈 지정)*/
/*태그선택자*/
/*화면 전체 레이아웃 설정 */
body {
	width: 970px;
	/* 블럭요소 일 때만 가운데정렬 됨*/
	margin: 0 auto;

	/* 	border: 1px solid red; */
}
/* 1. 스타일 초기 설정(공통 스타일) */
body {
	font-family: "나눔바른고딕";
}

ul {
	list-style-type: none;
}

/*1-1. 링크설정 */
a:link {
	color: black;
	text-decoration: none;
}
/*1-1-1.클릭한 링크 설정*/
a:visited {
	color: black;
	text-decoration: none;
}
/*1-1-2.롤 오버 링크 설정*/
a:hover {
	color: red;
	text-decoration: underline;
}
/*1-1-3.클릭 중 링크 설정 */
a:active {
	text-decoration: underline;
}
/* 1-2.수평선 태그 설정*/
.hr {
	border: 1px solid black;
	/*float속성제거*/
	clear: both;
}
/* 1-3.이미지 설정*/
/*이미지콘텐츠영역 클래스 이름: centerme, 가운데 정렬*/
.centerme {
	margin: 0 auto;
	display: block;
}
/*1-4. 저작권 정렬 */
.copy {
	text-align: center;
	margin: 15px 0;
}

/* 2. 컨텐츠 영역 지정 */
header {
	/*일반적인 사이트 120~ 150*/
	height: 125px;
	/* border: 1px solid blue; */
}

#contents {
	/*내용이 있던 없던 최소 사이즈 지정 */
	min-height: 550px;
	/* border: 1px solid blue; */
}

footer {
	height: 100px;
	/* border: 1px solid gold; */
}

/* 3. 상단 메뉴 영역*/
#nav {
	padding-bottom: 10px;
}

#nav li {
	/* 배치 방향 변경 */
	float: left;
	/* li에 바깥여백 지정*/
	margin-left: 100px;
}
/*메인이미지 정렬*/
/*margin:100px를 주게 되면 위에도 100px 밑에도 100px 생기기 때문에 안쪽 여백 사용해서 위치 조정*/
.mainlogo {
	padding-top: 120px;
}
</style>
<style type="text/css">
/*테이블 정렬 및 색상*/
table {
	width: 75%;
	margin: 0 auto;
	border-collapse: collapse;
	/*내용에 따라 테이블너비가 변하는 것을 방지 
	   단점: 각 열의 너비가 균등너비로 고정
	   해결: colgroup태그로 각 열 너비 재 설정*/
	table-layout: fixed;
	/*테이블 하단에 여백 지정 */
	margin-bottom:45px;
}

th, td {
	border: 1px solid black;
	text-align: center;
	padding: 10px;
}
/* 1행 클래스(bdtitle) 지정 */
.tdtitle {
	/* 자동 줄 바꿈 금지 - 한 줄로 출력 */
	white-space: nowrap;
	/* 영역 밖 넘친 문자를 숨김으로 처리*/
	overflow: hidden;
	/* 넘어간 부분을 ...(ellipsis)로 처리(문자 줄임)*/
	text-overflow: ellipsis;
}

/*페이징*/
.pgnav{
	width:500px; 
	height:35px;
	margin:25px auto;
}
.pgnav li{
	float:left;
	padding-left: 17px;

}
 .cpage{font-size:200%;
	   color:red;
	   font-weight:bold;
	   } 
</style>
</head>

<body>
	<!--  공통된 상단 영역과 하단 영역 jsp파일을 만든 후 그 파일을 불러옴. -->
	<!-- 상단 영역(header) 시작-->
	<%--정적포함: jsp를 서블릿으로 컴파일하기 전에 먼저 include될 파일의 소스를 현재 문서에 삽입 --%>
	<%--그런 다음 서블릿으로 변환하고 실행 후 결과 출력--%>
	<%@include file="/layout/header.jsp"%>
	<!-- 상단 영역(header) 끝-->

	<div id="contents">
		<h2>게시판</h2>
		<table>
			<!-- 테이블 열 수와 너비 설정 -->
			<colgroup>
				<col style="width: 10%" />
				<col style="" />
				<col style="width: 15%" />
				<col style="width: 20%" />
				<col style="width: 10%" />
			</colgroup>

			<thead>
				<tr>
					<!-- 제목 행 출력 -->
					<th>번호</th>
					<th>제목</th>
					<th>작성자</th>
					<th>작성일</th>
					<th>조회</th>
				</tr>
			</thead>
			<tbody>
			<c:forEach var="r" items="${rs.rows}">
					<!-- 본문 행 출력 -->
					<tr>
						<td>${r.bdno}</td>
						<td class="tdtitle"><a href="view.jsp">${r.bdtitle}</a></td>
						<td>${r.userid}</td>
						<!-- 날짜 10개만 보이도록 잘라냄 -->
						<td>${fn:substring(r.regdate,0,10)}</td>
						<td>${r.reads}</td>
					</tr>
			</c:forEach>
			</tbody>
		</table>
		
		<ul class = "pgnav">
			<li><a href="list.jsp?cpage=1">맨처음</a></li>
			<li><a href="list.jsp?cpage=1">이전</a></li>
			
			<c:forEach var="i" begin="1" end="10">
			<!-- 링크를 만드는 코드 -->
			<%--현재 페이지가 i와 같다면 링크제거 후 출력--%>
				<c:if test="${i eq cpage}">
					<li class="cpage">${i}</li>
				</c:if>
			<!-- 링크를 만들지 않은 코드 -->
			<%--현재 페이지가 i와 다르다면 링크로 출력 --%>
				<c:if test="${i ne cpage}">
					<li><a href="list.jsp?cpage=${i}">${i}</a></li>
					
				</c:if>
			</c:forEach>
						
			<li><a href="list.jsp?cpage=1">다음</a></li>
			<li><a href="list.jsp?cpage=1">맨끝</a></li>
		</ul>
	
	</div>


	<!-- 하단 영역(footer) 시작 -->
	<%@include file="/layout/footer.jsp"%>
	<!-- 하단 영역(footer) 끝 -->

	<script type="js/jquery-1.11.1.min.js"></script>
	<script type="js/jech913.js"></script>
</body>
</html>